{% extends "simgenex/base_simgenex.html" %}
{%block center%}
{% include "simgenex/addSimexpressionInstructionModal.html" %}

<div class="edit_form" >
    <h2 class="title">Add new Simexpression</h2>
    <form action="edit" method="post" class="edit">
    {% csrf_token %}
            <div class="input_field" >
                <label>Name:</label>
                <span class="helptext">Enter name of simexpression</span>
                <input type="text" name="name" value="{{simexpression.simexpression_name}}" />
            </div>
            
            <div id="instructions" class="input_field">
                <label>Instructions:</label>
                <span class="helptext">Specifying the instructions for this simulating gene expression.(Notes: the instruction is ordered!)</span>
                <a href="#simexpression_form" class="link-button" id="addSimexpressionInstruction">Add Instruction</a>
                <ul id="instruction_list">
                    {% for instruction in inst_list %}
                        {% if  instruction.type == "foreach" %}
                            <li id='{{instruction.id}}' class="{{instruction.css}}">
                                <div class="instruction_element" >
                                    <div class="index">
                                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                                    </div>
                                    <div class="definition">
                                        <label >Type:</label><b>{{instruction.type}}</b>
                                        <input type="hidden" name="itype" value="{{instruction.type}}" readonly="readonly"/>
                                        <label class="long">Procedures:</label>
                                        <input type="text" name="procedures" title="Procedure list, separated by commas ( , )" value="{{instruction.procedures}}" />
                                        <input type="hidden" name="procedure" value="undefined"/>
                                    </div>
                                    <div class="control">
                                        <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                                        <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                                        <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                                        <a href="#simexpression_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                    </div>
                                </div>
                            </li>
                        {% else %}
                            {% if instruction.type == "invocation" %}
                                <li id='{{instruction.id}}' class="{{instruction.css}}">
                                    <div class="instruction_element" >
                                        <div class="index">
                                            <span>Instruction {{instruction.id|cut:"ins"}}: </span>
                                        </div>
                                        <div class="definition">
                                            <label>Type:</label><b>{{instruction.type}}</b>
                                            <input type="hidden" name="itype" value="{{instruction.type}}" readonly="readonly"/>
                                            <label class="long">Procedure:</label>
                                            <select name="procedure">
                                                <option value="undefined" selected="selected" >select</option>
                                                {% for p in request.session.sgx_program.sgx.procedure_defs %}
                                                    <option value="{{p.procedure_name}}"
                                                        {% if p.procedure_name == instruction.procedure%}
                                                            selected="selected"
                                                        {% endif %}
                                                    >{{p.procedure_name}}</option>
                                                {% endfor %}
                                            </select>
                                            <input type="hidden" name="procedures" value="undefined"/>
                                        </div>
                                        <div class="control">
                                            <a href="javascript:void(0);" class="del" title="Remove the instruction" id="{{instruction.del_id}}" ></a>
                                            <a href="javascript:void(0);" class="move-up" title="Move instruction up 1 level"></a>
                                            <a href="javascript:void(0);" class="move-down" title="Move instruction down 1 level"></a>
                                            <a href="#simexpression_form" class="insert" title="Insert new instruction above this" id="insert{{instruction.id|cut:"ins"}}"></a>
                                        </div>
                                    </div>
                                </li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div>
                <button type="submit" name="submit" > Submit</button>
            </div>
    </form>
</div>
{% endblock %}